//烧结录入
<template>
    <div class="container">
        <mt-navbar v-model="selected" class="mt-tab-item">
            <mt-tab-item id="1">原料水分粒度</mt-tab-item>
            <mt-tab-item id="2">烧结矿照片</mt-tab-item>

        </mt-navbar>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div>
                    <table class="table table-border">
                        <thead>
                        <tr>
                            <th colspan="2">项目</th>
                            <th>值</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="2">日期</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="2">班组</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="2">横班</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="2">取样时间</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="2">检测人</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>混合料</td>
                            <td>水分</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td rowspan="2">返矿</td>
                            <td>＞5mm</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>

                            <td>使用系列</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td rowspan="2">溶剂</td>
                            <td>≤3mm</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>≥5mm</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td rowspan="3">焦炭</td>
                            <td>≤3mm</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>≥5mm</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>水分</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>混合料</td>
                            <td>水分</td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="flex-1">
                    <div>

                    </div>
                    <div>
                        <mt-button type="primary">添加</mt-button>

                    </div>
                    <div>
                        <mt-button type="primary">取消</mt-button>

                    </div>
                    <div>

                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="flex-2">
                    <div>
                        <p>成1皮带</p>
                        <div>
                            <input type="file"/>
                            <p><i class="fa fa-file-image-o fa-3x" aria-hidden="true"></i>
                            </p>

                        </div>

                    </div>
                    <div>

                    </div>
                    <div>
                        <p>成6皮带</p>
                        <div>
                            <input type="file"/>
                            <p><i class="fa fa-file-image-o fa-3x" aria-hidden="true"></i>
                            </p>
                        </div>

                    </div>
                </div>
                <div class="flex-1">
                    <div>

                    </div>
                    <div>
                        <mt-button type="primary">添加</mt-button>

                    </div>
                    <div>
                        <mt-button type="primary">取消</mt-button>

                    </div>
                    <div>

                    </div>
                </div>

            </mt-tab-container-item>

        </mt-tab-container>
        <div class="replace">

        </div>
    </div>
</template>

<script>
    //   import echarts from "echarts";

    export default {
        name: "cookingScene",
        data() {
            return {
                selected: '1',

            };
        },
        mounted() {

        }
    };
</script>

<style lang="scss" scoped>
    .table {
        width: 100%;
    }

    .replace {
        height: 28px;
        /*width: 100vw;*/
    }

    .table-border {
        margin-top: 20px;
    }

    .table > caption + thead > tr:first-child > td,
    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > td,
    .table > thead:first-child > tr:first-child > th {
        border-top: 1px solid #ddd;
    }

    .flex-1 {
        display: flex;
        margin-top: 20px;
        div:nth-child(1) {
            flex: 3;
        }
        div:nth-child(2) {
            flex: 2;
        }
        div:nth-child(3) {
            flex: 2;
        }
        div:nth-child(4) {
            flex: 2;
        }

    }

    .flex-2 {
        padding: 20px 20px;
        display: flex;
        div:nth-child(1) {
            flex: 6;
            & > p {
                width: 100%;
                text-align: center;
                height: 30px;
                line-height: 30px;
            }
            & > div {
                width: 100%;
                height: 200px;
                border: 1px solid #dddddd;
                position: relative;
                & > input {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                }
                & > p {
                    width: 100%;
                    text-align: center;
                    height: 200px;
                    line-height: 200px;
                }
            }
        }
        div:nth-child(2) {
            flex: 1;
        }
        div:nth-child(3) {
            flex: 6;
            & > p {
                width: 100%;
                text-align: center;
                height: 30px;
                line-height: 30px;

            }
            & > div {
                width: 100%;
                height: 200px;
                border: 1px solid #dddddd;
                position: relative;
                & > input {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                }
                & > p {
                    width: 100%;
                    text-align: center;
                    height: 200px;
                    line-height: 200px;
                }
            }
        }
    }

</style>
